<template>
    <div class="songItem" @click="play(song)">
        <div><slot></slot></div>
        <div class="content">
            <h3 v-html="item.name"></h3>
            <p>
                <i class="SQ" v-if="isSQ"></i>
                <span v-html="artists"></span>-
                <span v-html="item.name"></span>
            </p>    
        </div>
        <Loading v-if="item.id==$root.musicStore.musicID"></Loading>
        <div class="playbtn" v-else>
            <span></span>
        </div>
    </div>
</template>
<script>
import Loading from '@/components/Loading'
export default {
    data(){
        return{
            artists:null,
            isSQ: false,
            song: [],
        }
    },
    components:{
        Loading
    },
    name:"SongItem",
    props:['item','keywords'],
    created(){
        this.$http.get('/song/detail?ids=' + this.item.id).then( data => {
            this.song = data.data.songs[0]
            // console.log(data.data);
            // console.log(data.data.songs[0]);
            // console.log(this.song);
            // console.log(this.song);
            if(data.data.privileges.length>0){
                // 判定是否SQ
                if(data.data.privileges[0].playMaxbr == 999000)  this.isSQ = true;     
            }
        }).catch(err=>{
            console.log(err);
        });
    },
    methods:{
        play(song){
            this.$root.musicStore.musicID = song.id;
            this.$root.musicStore.currentMusic = song;
            // console.log("item数据：",song.id);
            // console.log("musicList==>",this.$root.musicStore.musicList);
            // console.log("currentMusic==>",this.$root.musicStore.currentMusic);
            // this.$root.musicStore.musicList.unshift(song);
            // 更新播放列表
            let newArr = this.$root.musicStore.musicList;
            let find = false;
            // 循环查看歌曲id是否已存在
            for(let n of newArr){
                if(n.id == song.id) find = true; //存在find为true
            }
            // 如果find为false 将item歌曲对象push进去musicList
            if(!find) this.$root.musicStore.musicList.push(song);
            // this.$emit('add-list');
        },
    },
    mounted(){
        if(this.item.song){
            this.artists = this.item.song.artists[0].name;
        }
        if(this.item.artists){
            this.artists = this.item.artists[0].name;
        }
    }
}
</script>
<style lang="less" scoped>
.songItem{
    height: 55px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    .content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 55px;
        padding:6px 0px;
        flex:1;
        .SQ{
            display: inline-block;
            width: 12px;
            height: 8px;
            margin-right: 4px;
            background-image: url(../assets/img/index_icon.png);
            background-size: 166px 97px;
        }
        h3{
            color:#333;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        p{
            color:#aaa;
            font-size:12px;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
    }
    .playbtn{
        width: 42px;
        height: 55px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        span{
            width:22px;
            height: 22px;
            background:url(../assets/img/index_icon.png) no-repeat -24px 0px;
            background-size:166px 97px;
        }
    }
}
</style>